<script setup>
import {defineProps, inject, ref} from 'vue';
import {useI18n} from "vue-i18n";
const { t } = useI18n();
const container = ref(null);
defineProps({
  customerInfo: {
    type: Object,
    default: {
      full_name: '散客',
      balance: 0,
      integral: 0,
      avatar:null
    }
  }
})
const setModalVisibility = inject('setModalVisibility');
</script>
<template>
  <div class="flex justify-between items-center p-4">
    <a-avatar v-if="customerInfo.avatar">
      <img :alt="customerInfo.full_name" :src="customerInfo.avatar"/>
    </a-avatar>
    <a-avatar v-else>
      <img src="https://multi-store.crmeb.net/view_cashier/img/yonghu.908b01d3.png" />
    </a-avatar>
    <div class="flex-1 pl-1">
      <div class="flex justify-between items-center">
        <span
            class="font-bold text-base pr-1 overflow-hidden text-ellipsis whitespace-nowrap">{{ customerInfo.full_name }}</span>
        <span class="cursor-pointer text-orange-600 hover:text-orange-300 transition-transform transform active:scale-95"
              @click="setModalVisibility('showCustomerSearchModal', true)"> {{ t('switchCustomer') }}
        </span>
      </div>
      <div class="text-xs">
        <span> {{ t('balance') }}: <b>{{ customerInfo.balance }}</b></span>&nbsp;
        <span> {{ t('points') }}: <b>{{ customerInfo.integral }}</b></span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
</style>
